<template>
  <view class="root">
    <u-toast ref="uToast"/>
    <scroll-view :scroll-top="scrollView.scrollTop" scroll-y="true" class="scrollViewV" @scrolltoupper="upper"
                 @scrolltolower="lower" @scroll="scroll">
      <view class="top-bg" :style="{ 'background-image': gradientColor}"/>
      <!-- 第一部分 物业服务 -->
      <view class="y-box">
        <!-- 分区标头 -->
        <view class="model-header">
          <text class="model-header-text">物业服务</text>
          <text class="model-header-explain">物业帮您解决</text>
        </view>
        <view class="divider"/><!-- 分割线 -->
        <!-- 第一列 -->
        <view class="navi-recommend">
          <view class="navi-recommend-item" @click="toHouseBindingView">
            <text>房屋绑定</text>
          </view>
          <view @click="$utils.ownerStatus('/pages/repair/repair',this.$refs.uToast)"
                class="navi-recommend-item">
            <text>报事报修</text>
          </view>
          <view @click="$utils.ownerStatus('/pages/complain/ComplainView',this.$refs.uToast)"
                class="navi-recommend-item">
            <text>投诉建议</text>
          </view>
        </view>
        <!-- 第二列 -->
        <view class="navi-recommend">
          <view class="navi-recommend-item">
            <text>车位缴费</text>
          </view>
          <view class="navi-recommend-item">
            <text>车位申请</text>
          </view>
          <view class="navi-recommend-item">
            <text>物业缴费</text>
          </view>
        </view>
      </view>

      <!-- 第二部分 生活服务 -->
      <view class="z-box">
        <view class="model-header">
          <text class="model-header-text">生活服务</text>
          <text class="model-header-explain">方便您的生活，快乐社区</text>
        </view>
        <view class="divider"/><!-- 分割线 -->
        <!-- 第一列 -->
        <view class="navi-recommend">
          <view @click="$utils.ownerStatus('/pages/visitor/visitor',this.$refs.uToast)"
                class="navi-recommend-item">
            <text>访客邀请</text>
          </view>
          <navigator class="navi-recommend-item">
            <text>物品邮寄</text>
          </navigator>
          <view class="navi-recommend-item">
            <text>限制发布</text>
          </view>
        </view>
<!--        &lt;!&ndash; 第二列 &ndash;&gt;-->
<!--        <view class="navi-recommend">-->
<!--          <view class="navi-recommend-seizeASeat"/>&lt;!&ndash; 占位按钮 &ndash;&gt;-->
<!--          <view class="navi-recommend-seizeASeat"/>&lt;!&ndash; 占位按钮 &ndash;&gt;-->
<!--          <view class="navi-recommend-seizeASeat"/>&lt;!&ndash; 占位按钮 &ndash;&gt;-->
<!--        </view>-->
      </view>

      <!-- 第三部分 中介服务 -->
      <view class="z-box">
        <view class="model-header">
          <text class="model-header-text">中介服务</text>
          <text class="model-header-explain">稳定可靠值得信赖</text>
        </view>
        <view class="divider"/><!-- 分割线 -->
        <view class="navi-recommend">
          <view class="navi-recommend-item">
            <text>房屋出租</text>
          </view>
          <view class="navi-recommend-item">
            <text>房屋售卖</text>
          </view>
          <view class="navi-recommend-seizeASeat"/><!-- 占位按钮 -->
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import App from './Life.js';

export default App;

</script>

<style>
@import url('./Life.css');
</style>
